<template>
    <div>
        <el-table :data="users"
                  border
                  row-key="id"
                  stripe
                  :default-sort="{prop: 'baseInfo.name', order: 'ascending'}"
        >

            <el-table-column type="index" label="#"/>

            <el-table-column prop="baseInfo.name" label="姓名" sortable/>

            <el-table-column prop="baseInfo.age" label="年龄" sortable/>

            <el-table-column prop="baseInfo.sex" label="性别" sortable>
                <template slot-scope="{ row }">
                    {{ row.baseInfo.sex === 1 ? '男' : '女' }}
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="{ row }">
                    <el-button type="button" @click="UserEditorDialog.handleEdit(row)" icon="el-icon-edit" size="mini">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>

        <user-editor v-if="UserEditorDialog.show"
                     :recorder="UserEditorDialog.recorder"
                     @close="UserEditorDialog.handleClose"
        />
    </div>
</template>

<script>
    import UserInfo from "./UserInfo";
    import UserEditor from "./UserEditor";

    export default {
        components: {UserEditor},
        created() {
            for (let i = 0; i < 10; i++) {
                const userInfo = new UserInfo(i + 1, '张某' + i, i % 2, i + 30);
                this.users.push(userInfo);
            }
        },
        data() {
            return {
                users: [],
                UserEditorDialog: {
                    show: false,
                    recorder: null,
                    handleClose: (returnValues) => {
                        if (returnValues) {
                            Object.assign(this.UserEditorDialog.recorder, returnValues);
                        }
                        this.UserEditorDialog.show = false;
                        this.UserEditorDialog.recorder = null;
                    },
                    handleAdd: () => {
                        this.UserEditorDialog.show = true;
                        this.UserEditorDialog.recorder = null;
                    },
                    handleEdit: (row) => {
                        this.UserEditorDialog.show = true;
                        this.UserEditorDialog.recorder = row;
                    },
                },
            }
        },
    };
</script>
